London | 26-ITP-May | Zadri Abdule | Sprint 1 | Form Control#1223
London | 26-ITP-May | Zadri Abdule | Sprint 1 | Form Control#1223Zadri415 wants to merge 13 commits intoCodeYourFuture:mainfrom
Conversation
Updated the name input field to enforce a pattern that disallows only spaces.
Updated input field for full name to require a minimum length of 2 characters.
Updated radio button inputs to be required for color selection.
✅ Deploy Preview for cyf-onboarding-module ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Zadri415
added
Needs Review
Poonam-raj
added
Review in progress
| <label for="name">Full Name:</label><br> | ||
| <input type="text" id="name" name="name" mainlength="2" pattern=".*\S.*" title="Name must be 2 characters cannot contain only spaces" required><br> |
There was a problem hiding this comment.
This minimum character length wasn't working for me - I was able to submit a form with a name of "P", please take another look at this
| <div> | ||
| <label for="size">Select Size:</label> | ||
| <select id="size" name="size" required> | ||
| <option value="">--Select a Size--</option> |
There was a problem hiding this comment.
Good use of a initial default value
| <label for="size">Select Size:</label> | ||
| <select id="size" name="size" required> | ||
| <option value="">--Select a Size--</option> | ||
| <option value="XS">XS</option> | ||
| <option value="S">S</option> | ||
| <option value="M">M</option> | ||
| <option value="L">L</option> | ||
| <option value="XL">XL</option> | ||
| <option value="XXL">XXL</option> | ||
| </select><br><br> |
There was a problem hiding this comment.
could wrap this in a fieldset tag
| <fieldset> | ||
| <legend>Choose a T-shirt Color:</legend> | ||
|
|
||
| <label> | ||
| <input type="radio" name="color" value="red" required> | ||
| Red | ||
| </label> | ||
|
|
||
|
|
||
| <label> | ||
| <input type="radio" name="color" value="blue" required> | ||
| Blue | ||
| </label> | ||
|
|
||
|
|
||
| <label> | ||
| <input type="radio" name="color" value="green" required> | ||
| Green | ||
| </label> | ||
|
|
||
| </fieldset> | ||
|
|
||
| <!-- Size --> |
There was a problem hiding this comment.
Spacing here is odd. I would be careful to either use a linter like Prettier to format your code before you submit or make sure you take out unnecessary spaces before you commit code to a repo
| <fieldset> | ||
| <legend>Choose a T-shirt Color:</legend> | ||
|
|
||
| <label> | ||
| <input type="radio" name="color" value="red" required> | ||
| Red | ||
| </label> | ||
|
|
||
|
|
||
| <label> | ||
| <input type="radio" name="color" value="blue" required> | ||
| Blue | ||
| </label> | ||
|
|
||
|
|
||
| <label> | ||
| <input type="radio" name="color" value="green" required> | ||
| Green | ||
| </label> | ||
|
|
||
| </fieldset> |
There was a problem hiding this comment.
For your "name" tags here, I would consider being more descriptive for future projects. If this represents data we want to be clear what the data is - here, colour alone is ok for now, but if we add other colour options (e.g. colour of the design on the t shirt, not just the t shirt itself) we might need this name tag to be "tshirt-colour"
Poonam-raj
left a comment
Poonam-raj
left a comment
There was a problem hiding this comment.
When I ran this form through the HTML validator I got the following
Error: Attribute mainlength not allowed on element input at this point.
From line 20, column 11; to line 20, column 153
<input type="text" id="name" name="name" mainlength="2" pattern=".*\S.*" title="Name must be 2 characters cannot contain only spaces" required><br>↩
Which might be contributing to the issue around minimum length I noted in the "Name" input
A strong form otherwise, I left some comments about future thoughts you might want to have if you made a form for a bigger project. But the only thing that needs fixing is the Name input
Poonam-raj
added
🏕 Priority Mandatory
Poonam-raj
added
Submit:PR
2 participants
Learners, PR Template
Self checklist
Changelist
Added required input fields for name and email with validation
Added T-shirt colour radio buttons
Added size dropdown menu
Fixed HTML validator